<template>
    <div class="box">
        <div class="top">
            <p class="title">数据统计</p>
            <p class="bg"></p>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
//获取图形图表节点
let charts = ref();
onMounted(() => {
    //初始化echarts实例
    let mycharts = echarts.init(charts.value);
    //设置配置项
    let option = {
        grid: {
            left: 20, // 调整左边距
            right: 20, // 调整右边距
            top: 10, // 调整上边距
            bottom: 20 // 调整下边距
        },
        visualMap: {
            type: 'continuous',
            min: 0,
            max: 10,
            left: 50,
            inRange: {
                color: ['#2F93C8', '#AEC48F', '#FFDB5C', '#F98862']
            }
        },
        series: {
            type: 'sunburst',
            
            data: [
                {
                    name: 'Grandpa',
                    children: [
                        {
                            name: 'Uncle Leo',
                            value: 15,
                            children: [
                                {
                                    name: 'Cousin Jack',
                                    value: 2
                                },
                                {
                                    name: 'Cousin Mary',
                                    value: 5,
                                    children: [
                                        {
                                            name: 'Jackson',
                                            value: 2
                                        }
                                    ]
                                },
                                {
                                    name: 'Cousin Ben',
                                    value: 4
                                }
                            ]
                        },
                        {
                            name: 'Aunt Jane',
                            children: [
                                {
                                    name: 'Cousin Kate',
                                    value: 4
                                }
                            ]
                        },
                        {
                            name: 'Father',
                            value: 10,
                            children: [
                                {
                                    name: 'Me',
                                    value: 5,
                                    itemStyle: {
                                        color: 'red'
                                    }
                                },
                                {
                                    name: 'Brother Peter',
                                    value: 1
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'Mike',
                    children: [
                        {
                            name: 'Uncle Dan',
                            children: [
                                {
                                    name: 'Cousin Lucy',
                                    value: 3
                                },
                                {
                                    name: 'Cousin Luck',
                                    value: 4,
                                    children: [
                                        {
                                            name: 'Nephew',
                                            value: 2
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'Nancy',
                    children: [
                        {
                            name: 'Uncle Nike',
                            children: [
                                {
                                    name: 'Cousin Betty',
                                    value: 1
                                },
                                {
                                    name: 'Cousin Jenny',
                                    value: 2
                                }
                            ]
                        }
                    ]
                }
            ],
            radius: [0, '110%'],
            center:['60%', '50%'],
            label: {
                rotate: 'radial',
                fontSize: 8
            }
        }
    };
    mycharts.setOption(option)
})
</script>

<style lang="scss" scoped>
.box {
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 15px;

    .top {
        margin-left: 20px;

        .title {
            color: white;
            font-size: 20px;
        }

        .bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
        }
    }

    .charts {
        height: 237px;
    }
}
</style>
